CSS 浮动元素对块级元素和行内元素的影响

前言：我们可能听说过，float元素是脱离了文档流的元素，其他元素将无视它的存在。但当我们实际应用中，实际效果并不完全是这样的。

float设计之初，主要是为了解决文章配图时的布局问题。如下图 HTML代码

CSS代码

从上图可以看到，浮动后，的下面有的背景颜色，这说明确实忽略了的存在。但同时我们也注意到， CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。 本文主要介绍用于装饰HTML网页的CSS技术。 其中HTML负责确定网页中有哪些内容，CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。 CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。 CSS可以零散地直接添加在要应用样式的网页元素上，也可以集中化内置于网页、链接式引入网页以及导入式引入网页。

CSS代码

行内元素 行内元素与块级元素不同，不能设置宽高。行内元素实际上受制于行框，而这个行框是不会忽视浮动元素的存在。文字就属于行内元素，或者说，里面的文字我们可以认为是被包裹在一个里的，而是一个行内元素。下面我们调用控制台查看一下行内元素的行框的宽度。 注：这里为了更准确显示每行行框的尺寸，每句分别用包裹。如果是整段包裹，在显示行内元素宽度时，会显示最宽的一行的行框的宽度。 从图中展示的行框的宽度即可印证行内元素不会忽视浮动元素。

浮动会让元素脱离文档流，不再影响不浮动的元素。实际上，并不完全如此。如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现得想浮动根本不存在一样。但是，框的文本内容会受到浮动元素的影响，会移动以留出空间。用技术术语来说，浮动元素旁边的行框被缩短，从而给浮动元素留出空间，因此行框围绕浮动框。实际上，创建浮动框使文本可以围绕图像。——《精通CSS：高级Web标准解决方案（第2版）》